<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>幸运抽奖</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        neutral: '#F5F7FA',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    animation: {
                        'bounce-slow': 'bounce 3s infinite',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }

            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }

            .lottery-shadow {
                box-shadow: 0 0 30px rgba(22, 93, 255, 0.3);
            }

            .transition-transform {
                transition-property: transform;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 300ms;
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-50 min-h-screen flex flex-col">
<!-- 导航栏 -->
<nav class="bg-white shadow-md sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fa fa-gift text-primary text-2xl"></i>
            <h1 class="text-xl font-bold text-dark">幸运抽奖</h1>
        </div>
        <div class="hidden md:flex space-x-6">
            <a href="#" class="text-gray-600 hover:text-primary transition-colors duration-300 flex items-center">
                <i class="fa fa-home mr-1"></i> 首页
            </a>
            <a href="#" class="text-gray-600 hover:text-primary transition-colors duration-300 flex items-center">
                <i class="fa fa-history mr-1"></i> 历史记录
            </a>
            <a href="#" class="text-gray-600 hover:text-primary transition-colors duration-300 flex items-center">
                <i class="fa fa-cog mr-1"></i> 设置
            </a>
        </div>
        <button class="md:hidden text-gray-600 focus:outline-none">
            <i class="fa fa-bars text-xl"></i>
        </button>
    </div>
</nav>

<!-- 主要内容区 -->
<main class="flex-grow container mx-auto px-4 py-8">
    <div class="max-w-4xl mx-auto">
        <!-- 标题和说明 -->
        <div class="text-center mb-10">
            <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-dark mb-4">幸运抽奖</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">
                点击"开始"按钮开始抽奖，名字会快速滚动。点击"结束"按钮停止抽奖，选出一位幸运者！</p>
        </div>

        <!-- 抽奖设置区域 -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-8 transform hover:shadow-xl transition-all duration-300">
            <h3 class="text-lg font-semibold text-dark mb-4 flex items-center">
                <i class="fa fa-sliders text-primary mr-2"></i> 抽奖设置
            </h3>
            <div class="grid md:grid-cols-2 gap-6">
                <div>
                    <label for="names" class="block text-sm font-medium text-gray-700 mb-1">参与者名单
                        (每行一个名字)</label>
                    <textarea id="names" rows="5"
                              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200"
                              placeholder="输入参与者姓名，每行一个">
                        '钱英杰',
                        '韦嘉渝',
                        '陈毅',
                        '王欣怡',
                        '胡鑫',
                        '左宇成',
                        '马欣悦',
                        '刘补莲',
                        '廖西平',
                        '杨添杰',
                        '陈熙',
                        '蒋文博',
                        '王舒雅',
                        '扎西王加',
                        '李楠',
                        '杨玉坤',
                        '敏秀雅',
                        '杨馨竹',
                        '苏静雯',
                        '刘小溶',
                        '吴意豪',
                        '邵晓川',
                        '钟星',
                        '胡泊',
                        '刁开芸',
                        '王洋涵',
                         '邱子芮',
                        '苟雅娇',
                        '许诗音',
                        '张智雄',
                        '李京城',
                        '周紫萱',
                        '雷雨田',
                        '向文昱',
                        '王一丁',
                        '唐梓航',
                        '张紫艺',
                        '何芝萱',
                        '黄玟菁',

                    </textarea>
                </div>
                <div>
                    <div class="mb-4">
                        <label for="lottery-count" class="block text-sm font-medium text-gray-700 mb-1">抽奖人数</label>
                        <input type="number" id="lottery-count" min="1" value="1"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200">
                    </div>
                    <div class="mb-4">
                        <label for="speed" class="block text-sm font-medium text-gray-700 mb-1">滚动速度</label>
                        <input type="range" id="speed" min="50" max="300" value="150"
                               class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                        <div class="flex justify-between text-xs text-gray-500 mt-1">
                            <span>快</span>
                            <span>慢</span>
                        </div>
                    </div>
                    <div class="mt-6">
                        <button id="save-settings"
                                class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 transform hover:scale-[1.02] flex items-center justify-center">
                            <i class="fa fa-save mr-2"></i> 保存设置
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 抽奖区域 -->
        <div class="relative bg-gradient-to-r from-primary/90 to-primary rounded-xl shadow-lg overflow-hidden mb-8 lottery-shadow">
            <div class="absolute inset-0 bg-[url('https://picsum.photos/id/1076/1200/400')] bg-cover bg-center opacity-10"></div>
            <div class="relative p-8 md:p-10 text-center">
                <h3 class="text-xl font-bold text-white mb-6 flex justify-center items-center">
                    <i class="fa fa-trophy mr-2"></i> 抽奖结果
                </h3>

                <div id="lottery-result"
                     class="bg-white/95 rounded-lg p-6 md:p-8 min-h-[200px] flex items-center justify-center mb-6">
                    <div class="text-center">
                        <p class="text-gray-500 mb-2">点击开始按钮开始抽奖</p>
                        <i class="fa fa-hand-pointer-o text-3xl text-primary/60 animate-bounce-slow"></i>
                    </div>
                </div>

                <div class="flex flex-wrap justify-center gap-4">
                    <button id="start-btn"
                            class="bg-secondary hover:bg-secondary/90 text-white font-medium py-3 px-8 rounded-lg transition-all duration-200 transform hover:scale-[1.05] flex items-center">
                        <i class="fa fa-play-circle mr-2"></i> 开始抽奖
                    </button>
                    <button id="stop-btn"
                            class="bg-gray-600 hover:bg-gray-700 text-white font-medium py-3 px-8 rounded-lg transition-all duration-200 transform hover:scale-[1.05] flex items-center"
                            disabled>
                        <i class="fa fa-stop-circle mr-2"></i> 停止抽奖
                    </button>
                    <button id="reset-btn"
                            class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-3 px-8 rounded-lg transition-all duration-200 transform hover:scale-[1.05] flex items-center">
                        <i class="fa fa-refresh mr-2"></i> 重置
                    </button>
                </div>
            </div>
        </div>

        <!-- 历史记录 -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
            <h3 class="text-lg font-semibold text-dark mb-4 flex items-center">
                <i class="fa fa-history text-primary mr-2"></i> 历史记录
            </h3>
            <div id="history-list" class="space-y-3 max-h-[300px] overflow-y-auto pr-2">
                <div class="text-gray-500 italic text-center py-4">暂无抽奖历史</div>
            </div>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-dark text-white py-6">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0">
                <div class="flex items-center space-x-2">
                    <i class="fa fa-gift text-primary text-xl"></i>
                    <span class="font-semibold">幸运抽奖</span>
                </div>
                <p class="text-gray-400 text-sm mt-1">公平、公正、公开的抽奖工具</p>
            </div>
            <div class="flex space-x-4">
                <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
                    <i class="fa fa-github text-xl"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
                    <i class="fa fa-twitter text-xl"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
                    <i class="fa fa-envelope text-xl"></i>
                </a>
            </div>
        </div>
        <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
            &copy; 2025 幸运抽奖 | 公平、公正、公开的抽奖工具
        </div>
    </div>
</footer>

<script>
    // 抽奖逻辑
    document.addEventListener('DOMContentLoaded', function () {
        const namesTextarea = document.getElementById('names');
        const lotteryCountInput = document.getElementById('lottery-count');
        const speedInput = document.getElementById('speed');
        const saveSettingsBtn = document.getElementById('save-settings');
        const startBtn = document.getElementById('start-btn');
        const stopBtn = document.getElementById('stop-btn');
        const resetBtn = document.getElementById('reset-btn');
        const lotteryResult = document.getElementById('lottery-result');
        const historyList = document.getElementById('history-list');

        let names = [];
        let lotteryCount = 1;
        let speed = 150; // 初始速度
        let isRunning = false;
        let lotteryInterval;
        let selectedNames = [];
        let history = [];

        // 保存设置
        saveSettingsBtn.addEventListener('click', function () {
            const namesText = namesTextarea.value.trim();
            if (!namesText) {
                alert('请输入参与者名单！');
                return;
            }

            names = namesText.split('\n').filter(name => name.trim() !== '');
            lotteryCount = parseInt(lotteryCountInput.value) || 1;
            speed = parseInt(speedInput.value) || 150;

            if (names.length < lotteryCount) {
                alert(`参与者数量不足，至少需要 ${lotteryCount} 人！`);
                return;
            }

            // 保存到本地存储
            localStorage.setItem('lotteryNames', names.join('\n'));
            localStorage.setItem('lotteryCount', lotteryCount);
            localStorage.setItem('lotterySpeed', speed);

            // 显示成功提示
            showNotification('设置已保存！', 'success');
        });

        // 加载本地存储的设置
        function loadSettings() {
            const savedNames = localStorage.getItem('lotteryNames');
            const savedCount = localStorage.getItem('lotteryCount');
            const savedSpeed = localStorage.getItem('lotterySpeed');

            if (savedNames) namesTextarea.value = savedNames;
            if (savedCount) lotteryCountInput.value = savedCount;
            if (savedSpeed) {
                speedInput.value = savedSpeed;
                speed = parseInt(savedSpeed);
            }
        }

        // 开始抽奖
        startBtn.addEventListener('click', function () {
            if (isRunning) return;

            const namesText = namesTextarea.value.trim();
            if (!namesText) {
                alert('请输入参与者名单！');
                return;
            }

            names = namesText.split('\n').filter(name => name.trim() !== '');
            lotteryCount = parseInt(lotteryCountInput.value) || 1;

            if (names.length < lotteryCount) {
                alert(`参与者数量不足，至少需要 ${lotteryCount} 人！`);
                return;
            }

            isRunning = true;
            startBtn.disabled = true;
            stopBtn.disabled = false;
            resetBtn.disabled = true;

            // 清空结果区域
            lotteryResult.innerHTML = '';

            // 创建滚动显示的名字元素
            const nameElements = [];
            for (let i = 0; i < lotteryCount; i++) {
                const nameElement = document.createElement('div');
                nameElement.className = 'name-item text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-primary mb-4';
                nameElement.style.transition = 'all 0.1s ease';
                lotteryResult.appendChild(nameElement);
                nameElements.push(nameElement);
            }

            // 滚动名字
            lotteryInterval = setInterval(() => {
                nameElements.forEach((element, index) => {
                    const randomIndex = Math.floor(Math.random() * names.length);
                    element.textContent = names[randomIndex];

                    // 添加动画效果
                    element.style.transform = 'scale(1.1)';
                    setTimeout(() => {
                        element.style.transform = 'scale(1)';
                    }, 50);
                });
            }, speed);
        });

        // 停止抽奖
        stopBtn.addEventListener('click', function () {
            if (!isRunning) return;

            clearInterval(lotteryInterval);
            isRunning = false;
            startBtn.disabled = false;
            stopBtn.disabled = true;
            resetBtn.disabled = false;

            // 随机选择中奖者
            selectedNames = [];
            const tempNames = [...names];

            for (let i = 0; i < lotteryCount && tempNames.length > 0; i++) {
                const randomIndex = Math.floor(Math.random() * tempNames.length);
                selectedNames.push(tempNames[randomIndex]);
                tempNames.splice(randomIndex, 1);
            }

            // 显示中奖者
            lotteryResult.innerHTML = '';

            if (selectedNames.length === 1) {
                // 单个中奖者的特殊效果
                const winnerElement = document.createElement('div');
                winnerElement.className = 'winner text-center';

                const confetti = document.createElement('div');
                confetti.className = 'confetti text-4xl mb-2';
                confetti.innerHTML = '🎉 🎉 🎉';

                const nameElement = document.createElement('div');
                nameElement.className = 'text-[clamp(2rem,5vw,3.5rem)] font-bold text-primary animate-bounce';
                nameElement.textContent = selectedNames[0];

                const trophyElement = document.createElement('div');
                trophyElement.className = 'trophy text-4xl mt-2 text-yellow-500';
                trophyElement.innerHTML = '🏆';

                winnerElement.appendChild(confetti);
                winnerElement.appendChild(nameElement);
                winnerElement.appendChild(trophyElement);
                lotteryResult.appendChild(winnerElement);
            } else {
                // 多个中奖者
                const titleElement = document.createElement('h4');
                titleElement.className = 'text-lg font-semibold text-gray-700 mb-4';
                titleElement.textContent = `恭喜以下 ${selectedNames.length} 位幸运者：`;
                lotteryResult.appendChild(titleElement);

                const namesContainer = document.createElement('div');
                namesContainer.className = 'flex flex-wrap justify-center gap-4';

                selectedNames.forEach(name => {
                    const nameElement = document.createElement('div');
                    nameElement.className = 'bg-primary/10 text-primary px-4 py-2 rounded-full font-medium';
                    nameElement.textContent = name;
                    namesContainer.appendChild(nameElement);
                });

                lotteryResult.appendChild(namesContainer);
            }

            // 添加到历史记录
            const now = new Date();
            const timestamp = now.toLocaleString();
            const historyItem = {
                id: Date.now(),
                timestamp,
                names: selectedNames,
                count: selectedNames.length
            };

            history.unshift(historyItem);
            if (history.length > 10) history.pop(); // 只保留最近10条记录

            // 保存历史记录到本地存储
            localStorage.setItem('lotteryHistory', JSON.stringify(history));

            // 更新历史记录显示
            updateHistoryDisplay();

            // 显示成功提示
            showNotification('抽奖完成！', 'success');
        });

        // 重置
        resetBtn.addEventListener('click', function () {
            if (isRunning) {
                clearInterval(lotteryInterval);
                isRunning = false;
            }

            startBtn.disabled = false;
            stopBtn.disabled = true;
            resetBtn.disabled = false;

            // 重置结果区域
            lotteryResult.innerHTML = `
                    <div class="text-center">
                        <p class="text-gray-500 mb-2">点击开始按钮开始抽奖</p>
                        <i class="fa fa-hand-pointer-o text-3xl text-primary/60 animate-bounce-slow"></i>
                    </div>
                `;

            // 显示提示
            showNotification('已重置抽奖！', 'info');
        });

        // 更新历史记录显示
        function updateHistoryDisplay() {
            if (history.length === 0) {
                historyList.innerHTML = '<div class="text-gray-500 italic text-center py-4">暂无抽奖历史</div>';
                return;
            }

            historyList.innerHTML = '';

            history.forEach(item => {
                const historyItem = document.createElement('div');
                historyItem.className = 'p-3 border-b border-gray-100 last:border-b-0 hover:bg-gray-50 rounded transition-colors duration-150';

                const header = document.createElement('div');
                header.className = 'flex justify-between items-center mb-2';

                const date = document.createElement('span');
                date.className = 'text-sm text-gray-500';
                date.textContent = item.timestamp;

                const count = document.createElement('span');
                count.className = 'bg-primary/10 text-primary text-xs px-2 py-1 rounded-full';
                count.textContent = `${item.count}人中奖`;

                header.appendChild(date);
                header.appendChild(count);

                const namesContainer = document.createElement('div');
                namesContainer.className = 'flex flex-wrap gap-2';

                item.names.forEach(name => {
                    const nameTag = document.createElement('span');
                    nameTag.className = 'bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded-full';
                    nameTag.textContent = name;
                    namesContainer.appendChild(nameTag);
                });

                historyItem.appendChild(header);
                historyItem.appendChild(namesContainer);
                historyList.appendChild(historyItem);
            });
        }

        // 显示通知
        function showNotification(message, type = 'info') {
            // 创建通知元素
            const notification = document.createElement('div');
            notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 transform transition-all duration-300 translate-x-full opacity-0`;

            // 根据类型设置样式
            if (type === 'success') {
                notification.classList.add('bg-green-50', 'border-l-4', 'border-green-400', 'text-green-700');
            } else if (type === 'error') {
                notification.classList.add('bg-red-50', 'border-l-4', 'border-red-400', 'text-red-700');
            } else {
                notification.classList.add('bg-blue-50', 'border-l-4', 'border-blue-400', 'text-blue-700');
            }

            // 设置内容
            notification.innerHTML = `
                    <div class="flex items-center">
                        ${type === 'success' ? '<i class="fa fa-check-circle text-green-500 mr-3"></i>' :
                type === 'error' ? '<i class="fa fa-exclamation-circle text-red-500 mr-3"></i>' :
                    '<i class="fa fa-info-circle text-blue-500 mr-3"></i>'}
                        <p>${message}</p>
                    </div>
                `;

            // 添加到页面
            document.body.appendChild(notification);

            // 显示动画
            setTimeout(() => {
                notification.classList.remove('translate-x-full', 'opacity-0');
                notification.classList.add('translate-x-0', 'opacity-100');
            }, 10);

            // 自动关闭
            setTimeout(() => {
                notification.classList.remove('translate-x-0', 'opacity-100');
                notification.classList.add('translate-x-full', 'opacity-0');

                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 300);
            }, 3000);
        }

        // 加载历史记录
        function loadHistory() {
            const savedHistory = localStorage.getItem('lotteryHistory');
            if (savedHistory) {
                history = JSON.parse(savedHistory);
                updateHistoryDisplay();
            }
        }

        // 初始化
        loadSettings();
        loadHistory();

        // 监听速度变化
        speedInput.addEventListener('input', function () {
            speed = parseInt(this.value);
            if (isRunning) {
                clearInterval(lotteryInterval);
                lotteryInterval = setInterval(() => {
                    const nameElements = document.querySelectorAll('.name-item');
                    nameElements.forEach((element, index) => {
                        const randomIndex = Math.floor(Math.random() * names.length);
                        element.textContent = names[randomIndex];

                        // 添加动画效果
                        element.style.transform = 'scale(1.1)';
                        setTimeout(() => {
                            element.style.transform = 'scale(1)';
                        }, 50);
                    });
                }, speed);
            }
        });
    });
</script>
</body>
</html>
